<template>
  <span v-if="checkIsFilterForm()" class="comp-filter-form-toolbar">
    <a-tooltip placement="top" title="重置">
      <span
        class="filter-form-item-execute undo"
        :class="{
          disable: isRunning,
        }"
        @click.stop="reset"
      >
        <a-icon type="undo" />
      </span>
    </a-tooltip>
    <a-tooltip placement="top" :title="isRunning ? '执行中' : '执行'">
      <a-icon-font
        v-if="!isRunning"
        type="iconkaishi"
        :class="{
          'filter-form-item-execute': true,
          disable: isRunning || disabled,
        }"
        @click.stop="startRunning"
      />
      <a-icon-font
        v-else
        type="icontingzhi"
        class="filter-form-item-execute"
        @click.stop="stopRunning"
      />
    </a-tooltip>
  </span>
</template>
<script lang="ts">
// , Prop, Watch
import { checkIsFilterForm } from '@/util/common'
import { Component, Vue, Prop } from 'vue-property-decorator'
import { GridItemDataInterface } from '../vueGridLayout/interfate/grid-Item-data-inteface'

/** 筛选器控件运行工具 */
@Component({
  name: 'filter-form-toolbar',
})
export default class FilterFormToolbar extends Vue {
  /** 筛选器配置数据 */
  @Prop() gridItem!: GridItemDataInterface

  /** 索引 */
  @Prop() index!: number

  /** 是否禁用 */
  @Prop({
    default: () => false,
  })
  disabled!: boolean

  @Prop({
    default: () => false,
  })
  isRunning!: boolean

  /** 检测是否是筛选器控件 */
  checkIsFilterForm() {
    return checkIsFilterForm(this.gridItem)
  }

  /** 开始任务 */
  startRunning() {
    if (this.disabled) {
      return
    }
    this.$emit('start', this.gridItem, this.index)
  }

  /** 停止任务 */
  stopRunning() {
    if (this.disabled) {
      return
    }
    this.$emit('stop', this.gridItem, this.index)
  }

  /** 重置 */
  reset() {
    if (this.disabled) {
      return
    }
    this.$emit('reset', this.gridItem, this.index)
  }
}
</script>
<style lang="less" scoped>
.comp-filter-form-toolbar {
  display: inline-block;
  height: auto;
  opacity: 0;
  padding-right: 4px;
  pointer-events: none;
  width: auto;

  .filter-form-item-execute {
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    height: 24px;
    line-height: 22px;
    padding: 2px 4px;

    &.undo {
      display: inline-block;
      font-size: 15px;
      line-height: 15px;
      transform: translateY(-1px);
    }

    &.disable {
      cursor: not-allowed;
      opacity: 0.5 !important;
    }
  }
}
</style>
